<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <input type="text" class="search">
  <ul class="list"></ul>
</body>
<script>
  const search = document.querySelector(".search");
  const list = document.querySelector(".list")
  let url = "https://www.baidu.com/sugrec";

  // 函数防抖
  // let t;
  // search.oninput = function(){
  //   clearTimeout(t);
  //   t = setTimeout(()=>{
  //     jsonp(url, function(res){
  //       // console.log(res)
  //       let s = "";
  //       res.g.forEach(val=>{
  //         s += `<li>${val.q}</li>`
  //       })
  //       list.innerHTML = s;
  //     }, {
  //       prod: "pc",
  //       wd: this.value,
  //       cb: "asgdfhsjf"
  //     }, "cb");
  //   }, 1000)
  // }

  // 函数节流
  let t;
  search.oninput = function(){
    if(t) return;
    t = setTimeout(()=>{
      jsonp(url, function(res){
        // console.log(res)
        let s = "";
        res.g.forEach(val=>{
          s += `<li>${val.q}</li>`
        })
        list.innerHTML = s;
      }, {
        prod: "pc",
        wd: this.value,
        cb: "asgdfhsjf"
      }, "cb");
      t = undefined;
    }, 1000)
  }
  




  function jsonp(url, success, data, colName){
    let str = "";
    for(let i in data){
      str += `${i}=${data[i]}&`
    }
    url += "?" + str.slice(0, -1);

    window[data[colName]] = function(res){
      success(res);
    }

    const script = document.createElement("script")
    script.src = url;
    document.body.appendChild(script);
  }
</script>

</html>